<template>
    <div style="margin-left: 30px;">
        <div style="width:100%;margin-top:0px">
            <el-row>
                <el-col :span="22">
                    <h2 style="text-align:left;color:#fff">
                        <i class="el-icon-upload" style="font-size:25px"></i>&nbsp;我的发布
                    </h2>
                    <hr style="text-align:left;margin-left: 0px;width:150px;height:5px;border:none;background-color:#4074bf" />
                </el-col>
                <!-- <el-col :span="22">
                     <SearchBar style="float:right"></SearchBar> 
                </el-col> -->
                <el-col :span="2">
                    <el-tooltip placement="bottom" effect="light" style="float:right">
                        <p slot="content" style="margin:0 0">{{disabled ? '开启' : '关闭'}}tooltip</p>
                        <el-button @click="disabled = !disabled" type="info" size="small"
                            :icon="disabled ? 'el-icon-star-on' : 'el-icon-star-off'" circle></el-button>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>


        <div v-if="getMyPublish.length==0">
            您还没有发布东西呢
        </div>

        <div style="column-count:3;column-gap:30px;margin-top:20px;">
        <el-tooltip :disabled="disabled" effect="dark" placement="right" v-for="item in getMyPublish" :key="item.id">
            <h3 slot="content">{{item.dishesName}}</h3>
            <div slot="content" v-for="di in item.dishesIngredients " :key="di.id" style="width:150px">
                <el-row>
                    <el-col :span="15"><p>{{di.ingredientsName}}</p></el-col>
                    <el-col :span="5"><p>{{di.ingredientsNum}}</p></el-col>
                    <el-col :span="4"><p>{{di.ingredientsUnit}}</p></el-col>
                </el-row>
            </div>

            <el-card class="box-card cardStyle" :body-style="{ padding: '0px' }">

                <el-image class="imgStyle" :src="item.dishesImg" fit="cover"></el-image>

                <el-tag class="tagStyle" :type="tagClassify(item.dishesTag)" effect="dark" size="mini">
                    {{item.dishesTag}}
                </el-tag>

                <!-- 注：此处 e-image 添加点击事件会使滚动条消失，div作为覆盖层盖在上面完成点击事件--by hui  -->
                <div style="width: 210px;height: 210px;position: absolute;margin-top:-210px" @click="viewDetails(item.dishesId)">
                </div>

                <h3 class="h3Style" @click="viewDetails(item.dishesId)">{{item.dishesName}}</h3>


                <p class="pStyle"><img class="iconStyle" src="../../../assets/good.png" width="18px">{{item.dishesGoodnum}}
                </p>

                <!-- <el-avatar :size="50" src="../../../assets/001.png" style="border:3px solid #BBDDFF">
                <img src="../../../assets/001.png" />
            </el-avatar> -->
            </el-card>

        </el-tooltip>
        </div>
        <AlterPulish ref="alterpulish"></AlterPulish>

    </div>
</template>

<script>
    import AlterPulish from "./AlterPublish"

    import {mapGetters} from 'vuex'

    export default {
        name: 'MyPublish',
        components: {
            AlterPulish
        },
        data() {
            return {
                disabled: false, //控制提示
            }
        },
        computed: {
            ...mapGetters(['getMyPublish'])
        },
        methods: {
            //Tag判断
            tagClassify(dishes_tag) {
                if (dishes_tag === '原创') return this.tagtype = 'success'
                if (dishes_tag === '范本') return this.tagtype = 'warning'
                if (dishes_tag === '翻制') return this.tagtype = 'danger'
            },
            viewDetails(id) {
                this.$refs.alterpulish.PublishVisible = true;
                this.$store.commit('selectDishesId',id)
            },
        },

    }
</script>

<style scoped>
    .cardStyle {
        width: 210px;
        margin-bottom:30px;
        break-inside: avoid;
    }

    .imgStyle {
        width: 210px;
        height: 210px;
    }

    .tagStyle {
        position: absolute;
        margin-left: -200px;
        margin-top: 10px;
    }

    .h3Style {
        margin-top: 8px;
    }

    .pStyle {
        vertical-align: middle;
        font-size: 14px;
        font-weight: 500;
        color: #0090FF;
        margin-top: -5px;
    }

    .iconStyle {
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -3px;
    }
</style>